<template>
  <section class="details-box">
    <div class="content-top">
      <span class="content-title float-l">缴费项目详情</span>
    </div>
    <div class="middle">
      <div class="content-middle">
        <div class="item">
          <span class="name color-gray">缴费类型</span>
          <span class="text">{{modifyData.skuTypeName}}</span>
        </div>
        <div class="item">
          <span class="name color-gray">缴费名称</span>
          <span class="text">{{modifyData.name}}</span>
        </div>
        <div class="item">
          <span class="name color-gray">缴费日期</span>
          <span class="text">{{modifyData.startTime  | timeFormat('yyyy.MM.dd')}}  一  {{modifyData.endTime  | timeFormat('yyyy.MM.dd')}}</span>
        </div>
        <div class="item">
          <span class="name color-gray">缴费班级</span>
          <span class="text">{{modifyData.gradeListText}}</span>
        </div>
        <div class="item" v-if="modifyData.highest==modifyData.lowest">
          <span class="name color-gray">缴费金额</span>
          <span class="text">{{modifyData.amount | currency('')}}</span>
        </div>
        <div class="item" v-if="modifyData.highest!=modifyData.lowest">
          <span class="name color-gray">缴费金额</span>
          <span class="text">
            <span style="margin-right:10px">{{modifyData.name}}缴费表格</span>
            <el-button type="text" @click="derateSingleVisible=true">查看</el-button>
          </span>
        </div>
        <div class="item">
          <span class="name color-gray">缴费渠道</span>
          <span class="text">{{paymentAccount}}</span>
        </div>
        <div class="item">
          <span class="name color-gray">缴费分期</span>
          <span class="text">{{modifyData.installmentNum ? `允许分笔支付,最多可分${modifyData.installmentNum}笔进行支付`: '一一'}}</span>
        </div>
        <div class="item">
          <span class="name color-gray">缴费开始时提醒</span>
          <span class="text">{{modifyData.isStartNotice ? `缴费项目开始前${modifyData.isStartNotice}天发送通知`: '一一'}}</span>
        </div>
        <div class="item">
          <span class="name color-gray">缴费结束时提醒</span>
          <span class="text">{{modifyData.endNoticeTime ? `缴费项目结束前${modifyData.endNoticeTime}天发送通知`: '一一'}}</span>
        </div>
        <div class="item">
          <span class="name color-gray">缴费说明</span>
          <span class="text">{{modifyData.info ? modifyData.info: '一一'}}</span>
        </div>
      </div>
    </div>
    <el-dialog :visible.sync="derateSingleVisible" custom-class="modelClass2">
      <span slot="title"><el-tag :type="selectTag == item.id ? 'gray' : ''" v-for="(item, index) in allClassTag" :key="index" style="margin-right:5px;cursor:pointer" @click.native="clickTag(item.id)">{{item.tagName}}</el-tag></span>
      <el-table :data="studentSingleList" ref="derateSingleTable" tooltip-effect="dark" style="width: 100%">
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="sex" label="性别" :formatter="sexFormat"></el-table-column>
        <el-table-column prop="idType" label="证件类型" :formatter="idTypeFormat"></el-table-column>
        <el-table-column prop="cardNo" label="证件号码"></el-table-column>
        <el-table-column prop="shouldPay" label="缴费金额(元)" :formatter="priceFormat"></el-table-column>
      </el-table>
    </el-dialog>    
  </section>
</template>

<script>
import { modifyProject, gradeList, getDiscountList } from 'api/school/project/index'
import {getPaymentAccount, getPayedLists} from 'api/school/payManage/index'
import common from 'src/util/common'
import {sexFilter, idTypeFilter} from 'src/filter/index'
export default {
  data () {
    return {
      id: parseInt(common.params('id')),
      modifyData: {}, // 详情数据
      paymentAccount: '', // 缴费渠道
      derateSingleVisible: false, // 是否显示弹窗
      studentSingleList: [],
      allClassTag: [], // 用户上传的班级名字
      selectTag: '', // 选中的班级id
      studentAllByClass: {}, // 根据班级排列的所有学生
      gradeList: [] // 所有的班级
    }
  },
  created () {
    this.getGrade()
  },
  methods: {
    getData (data) { // 获取项目详情
      modifyProject({id: this.id}).then(res => {
        res.data.gradeListText = []
        data.forEach((obj) => {
          obj.children.forEach((oo) => {
            if (res.data.classList.indexOf(oo.id) !== -1) res.data.gradeListText.push(obj.label + oo.label)
          })
        })
        res.data.gradeListText = res.data.gradeListText.join(', ')
        this.modifyData = res.data
        if (this.modifyData.highest !== this.modifyData.lowest) {
          this.getCustomInfo()
        }
        this.getPaymentAccount()
      })
    },
    getGrade () { // 获取班级列表
      gradeList().then(res => {
        this.gradeList = res.data
        this.getData(res.data)
      })
    },
    getPaymentAccount () { // 获取项目缴费渠道
      getPaymentAccount().then(res => {
        console.log(res, 111)
        Object.keys(res.data).forEach(v => {
          res.data[v].forEach(val => {
            if (val.id === this.modifyData.paymentSettingId && val.type === this.modifyData.paymentType) {
              this.paymentAccount = val.name
            }
          })
        })
      })
    },
    getCustomInfo () { // 获取自定义缴费信息
      getDiscountList({id: this.id}).then(res => { // 是否有减免项
        if (!res.data.length) {
          getPayedLists({
            count: 3999,
            page: 1,
            schoolPaymentSkuId: this.id,
            payStatus: 0,
            classId: this.modifyData.classList
          }).then(v => {
            let obj = {}
            v.data.forEach(vv => {
              vv.amount = (vv.shouldPay / 100).toFixed(2)
              vv.id = vv.schoolStudentId
              if (!obj[vv.classId]) {
                obj[vv.classId] = []
              }
              obj[vv.classId].push(vv)
            })
            this.changeData(obj)
          })
        }
      })
    },
    sexFormat (row, col, value) { // 性别过滤器
      return sexFilter(value)
    },
    idTypeFormat (row, col, value) {
      return idTypeFilter(value)
    },
    priceFormat (row, col, value) {
      return (value / 100).toFixed(2)
    },
    changeData (res) { // 根据导入的数据进行过滤
      this.studentAllByClass = res
      let list = Object.keys(res).map(v => parseInt(v))
      this.allClassTag = []
      this.gradeList.forEach((obj) => {
        obj.children.forEach((oo) => {
          if (list.indexOf(oo.id) !== -1) {
            this.allClassTag.push({id: oo.id, tagName: obj.label + oo.label})
          }
        })
      })
      this.selectTag = this.allClassTag[0].id
      this.clickTag(this.selectTag)
    },
    clickTag (tagName) {  // 自定义价格表格中点击tag栏,显示不同班级
      this.selectTag = tagName
      this.studentSingleList = this.studentAllByClass[tagName]
    }
  }
}
</script>
<style lang="less" scoped>
  .details-box {height: 100%; padding: 20px 20px;}
  .details-box .float-r{float: right;}
  .details-box .float-l{float: left;}
  .details-box .content-top{ clear: both; border-bottom: 1px solid #e1e1e1; height: 30px;}
  .details-box .middle{padding: 10px 20px;border: 1px solid #e1e1e1; border-radius: 10px; margin-top: 20px;}
  .details-box .content-middle{clear: both;}
  .details-box .content-middle .item{padding: 16px 0; display: flex}
  .details-box .content-middle .name{width: 200px;text-align: left;}
  .details-box .content-middle .text{flex: 1;text-align: left;}
  .details-box .content-middle .input-name{width: 300px;}
  .color-gray{color: gray;}
  .details-box  .modelClass2 {width: 800px;}
  .details-box  .modelClass2 .el-dialog__header{background-color: #457ed8;padding-bottom: 16px;color: #ffffff;}
  .details-box  .modelClass2 .el-dialog__headerbtn .el-dialog__close{color: #ffffff;}
  .details-box  .modelClass2 .dialog-footer{text-align: center;}
  .details-box  .modelClass2 .el-checkbox{float: right;margin-right: 30px; }
  .details-box  .modelClass2 .bottom{width: 100px;}
  .details-box  .modelClass2 .el-dialog__body .el-table{overflow-y: overlay; max-height: 600px; min-height: 300px;}  
</style>